<template> 
  <div class="container"> 
    <div class="total-border">    
      <el-header>
        <div class="heade">
          <div class="title-left">
            <el-button
              size="large"
              @click.native="backtoHome" icon="el-icon-arrow-left" plain>返回</el-button>  
          </div>  
          <div class="title">
            <h1>修改饮食</h1> 
          </div>     
        </div>   
      </el-header>
    <!-- 添加    -->

      <div class="border">   
        <h1></h1>
          <el-form ref="form" label-width="85px" >
            <el-form-item label="食物名称">
              <!-- <el-input style="width: 90%;margin-left:-150px;" v-model="dietInfoPO.name" :disabled="true"></el-input> -->
             <span style="font-size:18px"> {{dietInfoPO.name}}</span>
            </el-form-item>
            <el-form-item label="用餐时段">
              <el-select v-model="dietRecordPO.type" style="width: 90%;margin-left:-65px;" placeholder="请选择用餐时段">
                <el-option label="早餐" value="BREAKFAST"></el-option>
                <el-option label="中餐" value="LUNCH"></el-option>
                <el-option label="晚餐" value="SUPPER"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用餐时间">
              <el-date-picker 
                type="date" 
                placeholder="选择日期" 
                v-model="dietRecordPO.date" 
                style="width: 90%;margin-left:-70px;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="食物份量">
              <el-input placeholder="0" type="number" style="width: 90%;margin-left:-65px;" min="0"  v-model="dietRecordPO.amount"></el-input> 
              <span>{{this.dietInfoPO.unit}}</span> 
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" style="width: 90%;margin-left:-70px;" v-model="dietRecordPO.comment"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleDelete">删除</el-button>
              <el-button type="primary" @click="onSubmit">修改</el-button>
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-form>
      </div> 
    </div> 
  </div>
</template> 
<script>
import { get,post,delet } from "../ajax";
import { MessageBox } from "element-ui";

export default {
  name: "ChangeDiet",
  components: {},
  data() {
    return {
      // type: "",
      // date: "",
      // amount: 0,
      // comment: "",
      //date: "",
      dietInfoPO:"",
      dietRecordPO:"",
    };
  },
  created(){
  },

  async mounted() {
    console.log(this.$route.query);
    const resR = await get("/SmartMachine/api/Diet/record",{
      body:{
        dietRecordId: this.$route.query.recordId,
      }
    })
    this.dietRecordPO = resR.data;
    //this.date=this.dietRecordPO.date;
    const resI = await get("/SmartMachine/api/Diet/diet",{
      body: {
        dietId: this.dietRecordPO.dietId,
      }
    })
    this.dietInfoPO=resI.data;
  },
  methods: {
    fmtDate(obj){
      var date =  new Date(obj);
      var y = 1900+date.getYear();
      var m = "0"+(date.getMonth()+1);
      var d = "0"+date.getDate();
      return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
    },

    backtoHome(){
      console.log(this.dietRecordPO.date)
      console.log(this.fmtDate(this.dietRecordPO.date))
      const date=this.fmtDate(this.dietRecordPO.date)
      this.$router.push({
        path: "/diet",
        query:{
          userId:this.dietRecordPO.userId,
          date:date,
        }
      })
    },

    async onSubmit() {
      console.log("submit!");
      this.dietRecordPO.energy=this.dietRecordPO.amount*this.dietInfoPO.kcal;
      //this.dietRecordPO.date=this.date;
      const data={
        dietInfoPO: this.dietInfoPO,
        dietRecordPO: this.dietRecordPO,
      }
      const res=await post("/SmartMachine/api/Diet/recordsUpdate",{
        body:data,
      })
      //console.log(res);
      if(!res.error){
        MessageBox.alert(`修改成功`, "饮食记录管理", {
          confirmButtonText: "好的",
        })
      }
      this.backtoHome();

    },

    async handleDelete() {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        //type: 'warning'
      }).then(async () => {
        //confirm
        const recordId = this.dietRecordPO.id;
        const res = await delet("/SmartMachine/api/Diet/records", {
          body: {
            id: recordId
          }
        });
        //console.log(res);
        if (res.error == 0) {
          //console.log("in delete");
          MessageBox.alert(`删除成功`, "饮食记录管理", {
            confirmButtonText: "好的"
          }).then(()=>{
            this.backtoHome();
          });
        }        
      }).catch(() => {
        //cancle
       
      });
      
    },


  }
};
</script> 
<style scoped>
.container {
  width: 100%;
  margin: 0 auto;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin: 20px;
}
.heade {
  display: flex;
  margin-left: 130px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 15px;
}
.total-border {
  width: 96%;
  height: 550px;
  border: 1px solid #ccc;
  margin: 20px;
}
.border {
  width: 98%;
  height: 400px;
  border: 1px solid #ccc;
  margin: 10px;
}
.item {
  flex: 0 0 30%;
  margin-top: 20px;
  margin: 20px;
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 8px;
  display: inline-block;
  border-radius: 15px;
  line-height: 5px;
}
.title {
  flex: 0 0 30%;
  margin-top: 3px;
  margin-left: 35%;
  font-size: 10px;
  line-height: 25px;
}
.title-left {
  margin-left: -20%;
}
</style> 

<style>
  .el-form-item__label{
    font-size:18px!important;
    margin-left:10px!important;
  }
</style>